<!DOCTYPE html>
<html lang="en">

	<head>
		<!-- 页面编码 -->
		<meta charset="utf-8">
		<!-- 移动设备优先 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 兼容Edge模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- 极速模式 -->
		<meta name="renderer" content="webkit">
		<!-- 标题 -->
		<title>BlogUi图标工具</title>
		<!-- 关键字 -->
		<meta name="keywords" content="BlogUi,BlogUi图标工具" />
		<!-- 描述 -->
		<meta name="description" content="BlogUi图标工具" />
		<!-- 作者 -->
		<meta name="author" content="大火兔" />
		<!-- 版权 -->
		<meta name="copyright" content="版权所有 BlogUi All Rights Reserved" />
		<!-- 搜索引擎索引向导 -->
		<meta name="robots" content="all" />
		<!-- 图标 -->
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="icon" type="image/svg+xml" href="favicon.ico" />
		<!-- 引入BlogUi.less -->
		<link rel="stylesheet/less" type="text/css" href="../css/blogui.less">
		<!-- 引入最新稳定版Less.js -->
		<script src="../js/less.min.js"></script>
		<link rel="stylesheet" href="../css/icons.css" />
	</head>

	<body>
		<div id="app">

			<div class="header">BlogUi图标工具</div>
			<div class="toolbar">
				<div class="name">
					<input type="text" v-model="searchval" class="input-text" placeholder="搜索" />
				</div>
				<div class="btns">
					<div class="clr" @click="onClear">清除</div>
					<div class="btn" @click="onSearch">搜索</div>
				</div>
			</div>
			<div class="main">
				<ul class="icon_lists dib-box">
					<template v-for="item in fontlist" :key="item.icon_id">
						<li class="dib" @click="copyCode(item.font_class)">
							<span :class="iconClass('icon',font_family,css_prefix_text,item.font_class)"></span>
							<div class="name">
								{{item.name}}
							</div>
							<div class="code-name">{{css_prefix_text}}{{item.font_class}}
							</div>
						</li>
					</template>
				</ul>
			</div>
			<div :class="inviewcss">
				<div class="panel">
					<div class="head">
						<span class="iconfont icon-close close" @click="layerClose"></span>
					</div>
					<div class="body">
						<div class="strong">Css</div>
						<div class="code">
							<div class="text">
								<input id="txtcss" type="text" v-model="fontclass" />
							</div>
							<div class="copy" @click="copyText('txtcss')">复制</div>
						</div>
						<div class="strong">Html</div>
						<div class="code">
							<div class="text">
								<input id="txthtml" type="text" v-model="fonthtml" />
							</div>
							<div class="copy" @click="copyText('txthtml')">复制</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/jquery-1.12.4.min.js"></script>
	<script src="../js/vue.min.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				"searchval": "",
				"inviewcss": "right-layer inview",
				"fontclass": "",
				"fonthtml": "",
				"fontlist": [],
				"font_family": "iconfont",
				"css_prefix_text": "icon-",
				"glyphs": [{
					"icon_id": "1250",
					"name": "更多/其他",
					"font_class": "more",
					"unicode": "f0141",
					"unicode_decimal": 983361
				}, {
					"icon_id": "7429",
					"name": "首页/主页",
					"font_class": "home",
					"unicode": "f029d",
					"unicode_decimal": 983709
				}, {
					"icon_id": "363381",
					"name": "点赞/赞同",
					"font_class": "zan",
					"unicode": "e607",
					"unicode_decimal": 58887
				}, {
					"icon_id": "595396",
					"name": "关闭/取消",
					"font_class": "close",
					"unicode": "e61a",
					"unicode_decimal": 58906
				}, {
					"icon_id": "688059",
					"name": "播放/进入",
					"font_class": "play",
					"unicode": "e769",
					"unicode_decimal": 59241
				}, {
					"icon_id": "690701",
					"name": "导航/菜单",
					"font_class": "menu",
					"unicode": "e61b",
					"unicode_decimal": 58907
				}, {
					"icon_id": "712096",
					"name": "邮箱/消息",
					"font_class": "mail",
					"unicode": "e601",
					"unicode_decimal": 58881
				}, {
					"icon_id": "775396",
					"name": "历史记录/倒计时",
					"font_class": "history",
					"unicode": "e685",
					"unicode_decimal": 59013
				}, {
					"icon_id": "841002",
					"name": "编辑/修改/反馈",
					"font_class": "edit",
					"unicode": "e66d",
					"unicode_decimal": 58989
				}, {
					"icon_id": "870329",
					"name": "勾选/正确/对的",
					"font_class": "yes",
					"unicode": "e600",
					"unicode_decimal": 58880
				}, {
					"icon_id": "1126020",
					"name": "微博",
					"font_class": "weibo",
					"unicode": "e64c",
					"unicode_decimal": 58956
				}, {
					"icon_id": "1126024",
					"name": "QQ",
					"font_class": "qq",
					"unicode": "e64e",
					"unicode_decimal": 58958
				}, {
					"icon_id": "1183176",
					"name": "向下",
					"font_class": "down",
					"unicode": "e684",
					"unicode_decimal": 59012
				}, {
					"icon_id": "1277253",
					"name": "警告/反馈",
					"font_class": "warning",
					"unicode": "e602",
					"unicode_decimal": 58882
				}, {
					"icon_id": "1305479",
					"name": "刷新",
					"font_class": "refresh",
					"unicode": "e641",
					"unicode_decimal": 58945
				}, {
					"icon_id": "1422714",
					"name": "联系人/帐号/用户",
					"font_class": "user",
					"unicode": "e60d",
					"unicode_decimal": 58893
				}, {
					"icon_id": "1435240",
					"name": "设置/设定/配置",
					"font_class": "settings",
					"unicode": "e633",
					"unicode_decimal": 58931
				}, {
					"icon_id": "1458007",
					"name": "退出/关闭",
					"font_class": "exit",
					"unicode": "e608",
					"unicode_decimal": 58888
				}, {
					"icon_id": "1526261",
					"name": "文件夹/目录",
					"font_class": "folder",
					"unicode": "e64f",
					"unicode_decimal": 58959
				}, {
					"icon_id": "1526301",
					"name": "二维码/扫码/分类",
					"font_class": "qrcode",
					"unicode": "e658",
					"unicode_decimal": 58968
				}, {
					"icon_id": "1604930",
					"name": "电话/客服/联系",
					"font_class": "telephone",
					"unicode": "e638",
					"unicode_decimal": 58936
				}, {
					"icon_id": "1660742",
					"name": "时间/计时器",
					"font_class": "time",
					"unicode": "e628",
					"unicode_decimal": 58920
				}, {
					"icon_id": "1884118",
					"name": "预览/浏览/查看",
					"font_class": "look",
					"unicode": "e63a",
					"unicode_decimal": 58938
				}, {
					"icon_id": "2076329",
					"name": "会员/VIP/推荐",
					"font_class": "vip",
					"unicode": "e8a6",
					"unicode_decimal": 59558
				}, {
					"icon_id": "2365240",
					"name": "红包/钱包/账户",
					"font_class": "hongbao",
					"unicode": "e631",
					"unicode_decimal": 58929
				}, {
					"icon_id": "2380651",
					"name": "热门/推荐",
					"font_class": "hot",
					"unicode": "e614",
					"unicode_decimal": 58900
				}, {
					"icon_id": "2384883",
					"name": "最新/新的",
					"font_class": "new",
					"unicode": "e64d",
					"unicode_decimal": 58957
				}, {
					"icon_id": "2674471",
					"name": "分享/导出",
					"font_class": "out",
					"unicode": "e624",
					"unicode_decimal": 58916
				}, {
					"icon_id": "2734939",
					"name": "文章/文件/复制",
					"font_class": "article",
					"unicode": "e621",
					"unicode_decimal": 58913
				}, {
					"icon_id": "3232590",
					"name": "iOS/苹果",
					"font_class": "ios",
					"unicode": "e651",
					"unicode_decimal": 58961
				}, {
					"icon_id": "3702935",
					"name": "饼状图/统计/分析",
					"font_class": "piechart",
					"unicode": "e650",
					"unicode_decimal": 58960
				}, {
					"icon_id": "3817326",
					"name": "插件/组件/应用",
					"font_class": "plugin",
					"unicode": "e6e8",
					"unicode_decimal": 59112
				}, {
					"icon_id": "4016507",
					"name": "文件/文件夹",
					"font_class": "file",
					"unicode": "e6ac",
					"unicode_decimal": 59052
				}, {
					"icon_id": "4314613",
					"name": "反馈/提醒/评价",
					"font_class": "proposal",
					"unicode": "e612",
					"unicode_decimal": 58898
				}, {
					"icon_id": "4427408",
					"name": "音乐/音频/听",
					"font_class": "music",
					"unicode": "e6a0",
					"unicode_decimal": 59040
				}, {
					"icon_id": "4570705",
					"name": "github",
					"font_class": "github",
					"unicode": "e72a",
					"unicode_decimal": 59178
				}, {
					"icon_id": "4631902",
					"name": "帮助/反馈/问题",
					"font_class": "help",
					"unicode": "e654",
					"unicode_decimal": 58964
				}, {
					"icon_id": "4656428",
					"name": "网址/URL/短链接",
					"font_class": "url",
					"unicode": "e62b",
					"unicode_decimal": 58923
				}, {
					"icon_id": "4657672",
					"name": "会员/贵宾/钻石",
					"font_class": "diamond",
					"unicode": "e604",
					"unicode_decimal": 58884
				}, {
					"icon_id": "4761768",
					"name": "回顶部/火箭/加速",
					"font_class": "rocket",
					"unicode": "e634",
					"unicode_decimal": 58932
				}, {
					"icon_id": "4867075",
					"name": "后退/向左",
					"font_class": "left",
					"unicode": "e652",
					"unicode_decimal": 58962
				}, {
					"icon_id": "4923338",
					"name": "群/群组/团队",
					"font_class": "qun",
					"unicode": "e611",
					"unicode_decimal": 58897
				}, {
					"icon_id": "4932635",
					"name": "下载/云端下载",
					"font_class": "download",
					"unicode": "ec1d",
					"unicode_decimal": 60445
				}, {
					"icon_id": "5334221",
					"name": "队员/群组/团队",
					"font_class": "group",
					"unicode": "e637",
					"unicode_decimal": 58935
				}, {
					"icon_id": "5379468",
					"name": "地址",
					"font_class": "address",
					"unicode": "e659",
					"unicode_decimal": 58969
				}, {
					"icon_id": "5401274",
					"name": "设置/进度/滑动",
					"font_class": "progress",
					"unicode": "e629",
					"unicode_decimal": 58921
				}, {
					"icon_id": "5405557",
					"name": "微信",
					"font_class": "weixin",
					"unicode": "e733",
					"unicode_decimal": 59187
				}, {
					"icon_id": "5450774",
					"name": "复制/拷贝/文件",
					"font_class": "copy",
					"unicode": "e616",
					"unicode_decimal": 58902
				}, {
					"icon_id": "6263341",
					"name": "预览/查找",
					"font_class": "find",
					"unicode": "e668",
					"unicode_decimal": 58984
				}, {
					"icon_id": "6488992",
					"name": "导入/进入",
					"font_class": "import",
					"unicode": "e632",
					"unicode_decimal": 58930
				}, {
					"icon_id": "6654377",
					"name": "回顶部/置顶",
					"font_class": "top",
					"unicode": "e643",
					"unicode_decimal": 58947
				}, {
					"icon_id": "7532872",
					"name": "喜欢/赞同/收藏",
					"font_class": "like",
					"unicode": "e665",
					"unicode_decimal": 58981
				}, {
					"icon_id": "7532882",
					"name": "搜索/查询/查找",
					"font_class": "search",
					"unicode": "e666",
					"unicode_decimal": 58982
				}, {
					"icon_id": "7819605",
					"name": "统计/分析/数据",
					"font_class": "data",
					"unicode": "e60e",
					"unicode_decimal": 58894
				}, {
					"icon_id": "7874533",
					"name": "源代码",
					"font_class": "code",
					"unicode": "e60f",
					"unicode_decimal": 58895
				}, {
					"icon_id": "7903217",
					"name": "加载/等待/花",
					"font_class": "loading",
					"unicode": "e606",
					"unicode_decimal": 58886
				}, {
					"icon_id": "7995964",
					"name": "置顶",
					"font_class": "istop",
					"unicode": "e68f",
					"unicode_decimal": 59023
				}, {
					"icon_id": "8039223",
					"name": "图片/照片",
					"font_class": "image",
					"unicode": "e65e",
					"unicode_decimal": 58974
				}, {
					"icon_id": "8406888",
					"name": "分享/转载/转发",
					"font_class": "share",
					"unicode": "e53c",
					"unicode_decimal": 58684
				}, {
					"icon_id": "8530603",
					"name": "日历",
					"font_class": "calendar",
					"unicode": "e615",
					"unicode_decimal": 58901
				}, {
					"icon_id": "8655880",
					"name": "手机",
					"font_class": "mobile",
					"unicode": "e653",
					"unicode_decimal": 58963
				}, {
					"icon_id": "9568045",
					"name": "向上",
					"font_class": "up",
					"unicode": "e645",
					"unicode_decimal": 58949
				}, {
					"icon_id": "9922118",
					"name": "打印",
					"font_class": "print",
					"unicode": "e603",
					"unicode_decimal": 58883
				}, {
					"icon_id": "10487569",
					"name": "统计/柱状图",
					"font_class": "histogram",
					"unicode": "e69b",
					"unicode_decimal": 59035
				}, {
					"icon_id": "10715438",
					"name": "上传/上载",
					"font_class": "upload",
					"unicode": "e635",
					"unicode_decimal": 58933
				}, {
					"icon_id": "11121506",
					"name": "粘贴",
					"font_class": "paste",
					"unicode": "e63f",
					"unicode_decimal": 58943
				}, {
					"icon_id": "12702655",
					"name": "消息/提醒/通知",
					"font_class": "message",
					"unicode": "e657",
					"unicode_decimal": 58967
				}, {
					"icon_id": "12807734",
					"name": "新窗口打开",
					"font_class": "winopen",
					"unicode": "e65a",
					"unicode_decimal": 58970
				}, {
					"icon_id": "13515718",
					"name": "关于/类别/板块",
					"font_class": "category",
					"unicode": "e62c",
					"unicode_decimal": 58924
				}, {
					"icon_id": "17722010",
					"name": "评论/提问",
					"font_class": "comment",
					"unicode": "e605",
					"unicode_decimal": 58885
				}, {
					"icon_id": "17816855",
					"name": "收藏",
					"font_class": "favorite",
					"unicode": "e505",
					"unicode_decimal": 58629
				}, {
					"icon_id": "20009310",
					"name": "太阳/明亮",
					"font_class": "sun",
					"unicode": "e6e7",
					"unicode_decimal": 59111
				}, {
					"icon_id": "20778190",
					"name": "赞赏",
					"font_class": "zanshang",
					"unicode": "e669",
					"unicode_decimal": 58985
				}, {
					"icon_id": "22334206",
					"name": "前进/向右",
					"font_class": "right",
					"unicode": "e609",
					"unicode_decimal": 58889
				}, {
					"icon_id": "22394526",
					"name": "安卓",
					"font_class": "android",
					"unicode": "e636",
					"unicode_decimal": 58934
				}, {
					"icon_id": "22978010",
					"name": "链接/网址",
					"font_class": "link",
					"unicode": "e89c",
					"unicode_decimal": 59548
				}, {
					"icon_id": "23799988",
					"name": "月亮/阴暗",
					"font_class": "moon",
					"unicode": "e618",
					"unicode_decimal": 58904
				}, {
					"icon_id": "23991825",
					"name": "错误/关闭",
					"font_class": "wrong",
					"unicode": "e610",
					"unicode_decimal": 58896
				}, {
					"icon_id": "24916986",
					"name": "公告/喇叭/通知",
					"font_class": "notification",
					"unicode": "e72f",
					"unicode_decimal": 59183
				}, {
					"icon_id": "26848616",
					"name": "剪切",
					"font_class": "cut",
					"unicode": "e613",
					"unicode_decimal": 58899
				}]
			},
			created: function() {
				this.fontlist = this.glyphs;
			},
			methods: {
				iconClass(icon, iconfont, prefix, fontclass) {
					return icon + ' ' + iconfont + ' ' + prefix + fontclass;
				},
				copyCode(cssname) {
					let fontcss = this.font_family + ' ' + this.css_prefix_text + cssname;
					this.fontclass = fontcss;
					this.fonthtml = "<span class=\"" + fontcss + "\"></span>";
					this.inviewcss = "right-layer inview inview-down";
				},
				layerClose() {
					this.inviewcss = "right-layer inview inview-up";
				},
				copyText(input) {
					var inputTxt = document.getElementById(input);
					inputTxt.select();
					document.execCommand("Copy");
					this.inviewcss = "right-layer inview inview-up";
				},
				onSearch() {
					let searchval = this.searchval.trim();
					if(searchval.length > 0) {
						let result = this.glyphs.filter(function(x) {
							if(x.name.search(searchval) != -1) {
								return x;
							}
						});
						this.fontlist = result;
					}
				},
				onClear() {
					this.searchval = "";
					this.fontlist = this.glyphs;
				}
			}
		});
	</script>

</html>